<template>
  <div>
    <mt-header fixed :title="title">
      <router-link to="/search" slot="right">
        <mt-button icon="search"></mt-button>
      </router-link>
    </mt-header>
    <ul class="fix-header fix-bottom" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading"
        infinite-scroll-distance="10">
      <template v-for="item in novels">
        <v-touch v-on:press="onPress(item.id)">
          <li class="index-li">
            <div v-on:click="check_is_read(item.id)">
              <img :src="item.cover" class="index-item-cover" :onerror="errorImg">
              <div class="index-item-content">
                <div class="index-item-content-title">{{ item.title }}</div>
                <span class="index-item-content-m">{{item.style}} | {{item.auth}}</span>
              </div>
            </div>
          </li>
        </v-touch>
      </template>
    </ul>
    <tabbar-components tabindex="index"></tabbar-components>
  </div>
</template>

<style lang="css" rel="stylesheet/css">
  .fix-bottom {
    margin-bottom: 10px;
    margin-top: 40px;
  }

  .mint-tabbar {
    min-height: 40px;
  }

  .index-li {
    display: block;
    border-bottom: 1px solid #eee;
    height: 66px;
    width: 100%;
  }

  .index-li a {
    height: 100%;
    width: 100%;
    display: block;
  }

  .index-item-cover {
    float: left;
    margin: 5px 10px 5px 20px;
    width: 40px;
    height: 56px;
  }

  .index-item-content {
    margin-top: 10px;
    margin-left: 5px;
  }

  .index-item-content-title {
    font-size: 13px;
    font-weight: 600;
    height: 32px;
    line-height: 32px;
  }

  .index-item-content-m {
    font-size: 11px;
  }
</style>
<script type="text/babel">
  import Vue from 'vue'
  import TabbarComponents from './tabbar.vue'
  import VueTouch from 'vue-touch'
  import {MessageBox} from 'mint-ui';

  Vue.use(VueTouch)

  export default{
    data(){
      return {
        title: " 书架 ",
        page: 0,
        loading: false,
        novels: [],
        errorImg: 'this.src="http://spider-img.nightc.com/cover.jpg"',
      }
    },
    methods: {
      loadMore: function () {
        this.loading = true
        this.fetch()
      },
      created: function () {
        this.fetch()
      },
      check_is_read(nid) {
        var _this = this
        var bookmark = localStorage["novel_mark_id_" + nid]
        if (bookmark != undefined && bookmark > 0) {
          _this.$router.push("/chapter/" + nid + "/" + bookmark)
        } else {
          _this.$router.push("/novel/" + nid)
        }
      },
      onPress: function (id) {
        id = parseInt(id)
        var _this = this
        MessageBox.confirm('是否删除！', {
          closeOnClickModal: false,
        }).then(action => {
          var markStr = localStorage['novel_mark']
          if (typeof(markStr) == 'undefined') {
            return
          }
          var mark = JSON.parse(markStr)
          var marknew = []
          for (var i = 0; i < mark.length; i++) {
            if (parseInt(mark[i]) == id) {
              localStorage.removeItem("novel_mark_id_" + id)
              localStorage.removeItem("novel_cache_info_" + id)
              continue
            }
            marknew.push(mark[i])
          }
          localStorage["novel_mark"] = JSON.stringify(marknew)
          _this.novels.splice(_this.novels.find(item => item.id === id), 1)
        });
      },
      fetch: function () {
        var _this = this
        var markStr = localStorage['novel_mark']
        if (typeof(markStr) == 'undefined') {
          return
        }
        var mark = JSON.parse(markStr)
        for (var i = 0; i < mark.length; i++) {
          var cacheStr = localStorage['novel_cache_info_' + mark[i]]
          if (typeof(cacheStr) == 'undefined') {
            _this.fetchData(mark[i])
            continue
          }
          _this.novels.push(JSON.parse(cacheStr))
        }
      },
      fetchData: function (nid) {
        var _this = this
        _this.$http.get("https://novel.nightc.com/v1/novel/" + nid).then((response) => {
          var body = response.body
          if (body.code == 0) {
            var novel = body.data
            _this.novels.push(novel)
            localStorage["novel_cache_info_" + nid] = JSON.stringify(novel)
          }
        })
      }
    },
    components: {
      TabbarComponents,
    }
  }
</script>
